<template>
   <div class="fullPage" ref="fullPage">
 <div
  class="fullPageContainer"
  ref="fullPageContainer"
  @mousewheel="mouseWheelHandle"
  @DOMMouseScroll="mouseWheelHandle"  
 >
  <div class="section section1">1</div>
  <div class="section section2">2</div>
  <div class="section section3">3</div>
  <div class="section section4">4</div>
 </div>
 </div>
</template>

<script>
export default {
 data(){
   return{
     fullPage:{
        current:1,//当前页码编号
        isScroll:true,//判断一个页面是否滚动,避免滚动多页
        deltaY:0//滚动的距离
     }
   }
 },
created(){
  // this.move()
},
methods:{
   pre(){
     if(this.fullPage.current -1 >0){
       this.fullPage.current-=1 
       this.move(this.fullPage.current)
     }
   },
    next(){
     if(this.fullPage.current +1 >0){
       this.fullPage.current+=1
       this.move(this.fullPage.current) 
     }
   },
  //  执行切换(jieli)
   move(index){
       this.fullPage.isScroll = true;
       this.direcToMove(index)//滚动执行
       setTimeout(()=>{
        this.fullPage.isScroll = false;
        console.log(1);
       },1000)
   },
   direcToMove(index){
        //1 获取品目高度
        let hight = this.$refs["fullPage"].clientHeight
        // 2获取图片容器
        let picContianer = this.$refs['fullPageContainer']
        let screenHight ;
        screenHight = (index-1)*hight + 'px'
        picContianer.style.transform  =  `translate${screenHight}`
        this.fullPage.current = index// 核心需求
        console.log('  ----->  ',hight,screenHight);
   },
   mouseWheelHandle(event){
    let evt = event || window.event
    if(evt.stopPropagation){
      evt.stopPropagation()
    }else{
      evt.returnValue = false
    }

    if(this.fullPage.isScroll){
      this.fullPage.isScroll = false
    }

      let e =  event.originalEvent || event
      console.log('e  ----->  ',e.deltaY);
      this.fullPage.deltaY = e.deltaY
      console.log('  -----> this.fullPage.deltaY  ',  this.fullPage.deltaY);
        if(this.fullPage.deltaY>0){
          this.next()
        }else{
          this.pre()
        }

  }
 }
}
</script>

<style scoped>
/* .fullPage{
  height: 100vw;
 overflow: hidden;
 background-color: rgb(189, 211, 186);
} */
.fullPageContainer{
 width: 100%;
 height: 100vw;
 transition: all linear 0.5s;
}
.section {
 width: 100%;
 height: 100%;
 background-position: center center;
 background-repeat: no-repeat;
}
.section1 {
 background-color: rgb(189, 211, 186);
height: 100%;

}
.section1 .secction1-content {
 color: #fff;
 text-align: center;
 position: absolute;
 top: 40%;
 right: 0;
 left: 0;
}
.secction1-content h1 {
 font-size: 40px;
 padding-bottom: 30px;
}
.secction1-content p {
 font-size: 20px;
}
.section2 {
 background-color: rgb(44, 48, 43);
}
.section3 {
 background-color: rgb(116, 104, 109);
}
.section4 {
 background-color: rgb(201, 202, 157);
}

/* .fullPage{
 height: 100%;
 overflow: hidden;
 background-color: rgb(189, 211, 186);
}
.fullPageContainer{
 width: 100%;
 height: 100%;
 transition: all linear 0.5s;
}
.section {
 width: 100%;
 height: 100%;
 background-position: center center;
 background-repeat: no-repeat;
}
.section1 {
 background-color: rgb(189, 211, 186);
 background: url("./assets/1.png");
}
.section1 .secction1-content {
 color: #fff;
 text-align: center;
 position: absolute;
 top: 40%;
 right: 0;
 left: 0;
}
.secction1-content h1 {
 font-size: 40px;
 padding-bottom: 30px;
}
.secction1-content p {
 font-size: 20px;
}
.section2 {
 background-color: rgb(44, 48, 43);
}
.section3 {
 background-color: rgb(116, 104, 109);
}
.section4 {
 background-color: rgb(201, 202, 157);
} */
</style>